<!DOCTYPE HTML>
<html>
<head>
    <%
    Data: app_struct type ZMYBW_APP_DEF,
    app_title type string value 'BI Apps Viewer'.

    select single * from ZMYBW_APP_DEF into app_struct where app_id = app_id.

    if app_struct-title is not initial.
    app_title = app_struct-title.
    endif.
    %>
    <title><%=app_title%></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="Stylesheet" type="text/css" href="css/common/bi_app_style.css"/>
    <link rel="Stylesheet" type="text/css" href="<%=theme%>/css/theme_style.css"/>
    <link rel="Stylesheet" type="text/css" href="<%=theme%>/css/ui-layout.css"/>
    <link rel="stylesheet" type="text/css" href="api/css/cupertino/jquery-ui-1.10.1.custom.min.css"/>

    <script type="text/javascript" src="dlg/dragiframe.js"></script>
    <script type="text/JavaScript" src="api/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="api/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/JavaScript" src="<%=theme%>/script/jquery.layout.min.js"></script>
    <script type="text/JavaScript" src="<%=theme%>/script/jquery.easing.1.3.js"></script>
    <script type="text/JavaScript" src="api/js/jquery.layout.pseudoClose.js"></script>
    <script type="text/javascript" src="api/boi.js"></script>
    <script type='text/JavaScript' src='../zbw_reporting/scripts/framework_include.js'></script>
    <%
    if app_struct-custom_script is not initial.
    %>
    <script type='text/JavaScript' src='<%=app_struct-custom_script%>'></script>
    <%
    endif.
    %>
    <script type="text/javascript">
        $(function () {
            BOI.theme = "<%=theme%>";

            //This code included into boi.js by Faisal
            /* BOI.Events.addListener(BOI.Events.repopen, function (args) {
                showHideComponents(args[0]);
            });
            BOI.Events.addListener(BOI.Events.repchange, function (args) {
                showHideComponents(args[0]);
            });*/

            //render the layout
            BOI.app_id = BOILib.Util.getUrlParam("app_id");
            BOI.Designer.initialize('bi_layout', BOI.app_id, function () {
                drawLayout();
                //RESIZE
                resize();
            });
            /***************************************************************************************/
        });

        function showHideComponents(rep_id) {
            var report = BOI.context.reports[rep_id];
            if (report) {
                for (var p in BOI.Designer.Layout.panels) {
                    var panel = BOI.Designer.Layout.panels[p];
                    for (var c in panel.components) {
                        var comp = panel.components[c];
                        if (comp.iframe) {
                            if (comp.iframe.properties.varname) {
                                var vname = comp.iframe.properties.varname;
                                if (report.variables[vname]) {
                                    $(comp.element).show();
                                }
                                else {
                                    $(comp.element).hide();
                                }
                            }

                        }
                    }
                }
            }
        }

        var resize = function () {
            $('html,body').height('100%');
            $('#bi_layout iframe').each(function () {

                $(this).load(function () {
                    var name = $(this).attr('name');

                    var h = window.frames[name].properties.height;
                    $(this).height(h);
                });
            });
        }

        function drawLayout() {
            var sizes = {
                top:parseInt(BOI.Designer.Layout.panels['TOP'].properties.height.value),
                left:parseInt(BOI.Designer.Layout.panels['LEFT'].properties.width.value),
                right:parseInt(BOI.Designer.Layout.panels['RIGHT'].properties.width.value),
                bottom:parseInt(BOI.Designer.Layout.panels['BOTTOM'].properties.height.value)
            }

            $('.wrapper').layout({
                applyDefaultStyles:true,
                resizable:true,
                closable:true,
                south__closable:false,
                east__closable:false,
                south__resizable:false,
                east__resizable:false,
                north__resizable:false,

                north__size:sizes.top,
                west__size:sizes.left,
                east__size:sizes.right,
                south__size:sizes.bottom,
                north__maskContents:true,
                west__maskContents:true,
                east__maskContents:true,
                south__maskContents:true,
                center__maskContents:true,
                stateManagement__enabled:false,

                minSize:1,

                //  set callback on any pane(s) where you want to prevent the pane - closing
                west__onclose_start:$.layout.callbacks.pseudoClose,
                north__onclose_start:$.layout.callbacks.pseudoClose,
                south__onclose_start:$.layout.callbacks.pseudoClose,
                east__onclose_start:$.layout.callbacks.pseudoClose
            });
            $('.wrapper').animate({ 'opacity':'1' }, 1000, function () {
            });
        }

        /**
         These methods are used for dialogs.
         **/
        function closeDialog(dlgName) {
            var dlg = $("#" + dlgName);
            closeDialogInternal(dlg);
        }
        function onDialogLoadEvent() {
            frames["dlg_iframe"].onLoadEvent();
        }
        function closeDialogInternal(dlg) {
            if (dlg[0]) {
                dlg.css("display", "none");
                dlg.attr("src", "");
                dlg.remove();
            }
        }
    </script>
</head>
<body>
<div id="bi_layout" class="apps_viewer">
    <div class="wrapper">
        <div class="ui-layout-center">
            <div id="CENTER">
                <!-- <iframe  src="comp/viewer/bi_apps_comp_report_view.html"></iframe>-->
            </div>
        </div>
        <div class="ui-layout-north">
            <div id="TOP">
                <!-- <iframe height="80" src="comp/banner/bi_comp-banner.htm"></iframe>-->
            </div>
        </div>
        <div class="ui-layout-south">
            <div id="BOTTOM"></div>
        </div>
        <div class="ui-layout-east">
            <div id="RIGHT"></div>
        </div>
        <div class="ui-layout-west">
            <div id="LEFT">
                <!--<iframe height="100%" src="test-comp-organization.htm"></iframe>-->
            </div>
        </div>
    </div>
</div>
<div id="dlg_container">
</div>
</body>
</html>
<%
theme = ''.
%>
